<template>
  <!-- 购车申请-->
  <view class="container">
    <u-toast ref="uToast" />
    <view class="Reviewdata">
      <view class="flex flex-ac-c flex-ai-c">
        <view class="rwbis"></view>
        提审资料
      </view>
      <view class="sehnpopor flex flex-ac-c flex-ai-c flex-jc-sb">
        <view class="rends">
          申请人
        </view>
        <view class="names flex">
          <view class="woname">
            {{namenaq}}
          </view>
          <view class="rnsz">
            已认证
          </view>
        </view>
      </view>
      <view class="mobieless flex flex-ac-c flex-ai-c flex-jc-sb">
        <view class="rends">
          联系电话
        </view>
        <view class="namess flex">
          {{mobiles}}
        </view>
      </view>
    </view>
    <view class="Reviewdata2">
      <view class="sehnpoporss flex flex-ac-c flex-ai-c flex-jc-sb" @tap="maritalStatus = true">
        <view class="rendss">
          婚姻状况
        </view>
        <view class="names flex">
          <view :class="mStitle==='请选择' ? 'wonameshuise' : 'wonames'">
            {{mStitle}}
          </view>
          <view class="rnsz">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view>
        </view>
      </view>
      <view class="sehnpoporss flex flex-ac-c flex-ai-c flex-jc-sb" @tap="workingConditions = true">
        <view class="rendss">
          工作状况
        </view>
        <view class="names flex">
          <view :class="wCtitle==='请选择' ? 'wonameshuise' : 'wonames'">
            {{wCtitle}}
          </view>
          <view class="rnsz">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view>
        </view>
      </view>
      <view class="sehnpoporss flex flex-ac-c flex-ai-c flex-jc-sb" @tap="educationalLevel = true">
        <view class="rendss">
          教育水平
        </view>
        <view class="names flex">
          <view :class="eltitle==='请选择' ? 'wonameshuise' : 'wonames'">
            {{eltitle}}
          </view>
          <view class="rnsz">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view>
        </view>
      </view>
      <view class="sehnpoporssmx flex flex-ac-c flex-ai-c flex-jc-sb" @tap="housingSituation = true">
        <view class="rendss">
          住房状况
        </view>
        <view class="names flex">
          <view :class="hStitle==='请选择' ? 'wonameshuise' : 'wonames'">
            {{hStitle}}
          </view>
          <view class="rnsz">
            <u-icon name="arrow-right" color="#9A9A9A" size="24rpx"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="agreement flex flex-jc-c">
      <view class="icons" @click="Agree">
        <!-- 未选择 -->
        <i-icon v-if="isAgree" icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#e1e1e1"></i-icon>
        <!-- 勾选 -->
        <i-icon v-else icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
      </view>
      我已阅读并同意<text @click="gouserAgreementPage">《用户在线购车服务协议》</text>
    </view>
    <view class="quertij" @click="nextStep">
      <view class="qurbtn">
        确认提交
      </view>
    </view>
    <!-- 婚姻状况-->
    <u-popup v-model="maritalStatus" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 486rpx;">
        <view class="hgztitle flex">
          <view class="titname">婚姻状况</view>
          <view class="iconcss" @tap="maritalStatus = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view :class="item.check ? 'hgxuanzhong' : 'hgxz'" @click="maritSclick(item,index)" v-for="(item,index) in maritalist"
          :key="index">
          {{item.name}}
        </view>
      </view>
    </u-popup>
    <!-- 工作状况-->
    <u-popup v-model="workingConditions" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 700rpx;">
        <view class="hgztitle flex">
          <view class="titname">工作情况</view>
          <view class="iconcss" @tap="workingConditions = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view :class="item.check ? 'hgxuanzhong' : 'hgxz'" @click="workclick(item,index)" v-for="(item,index) in worKlist"
          :key="index">
          {{item.name}}
        </view>
      </view>
    </u-popup>
    <!-- 教育水平-->
    <u-popup v-model="educationalLevel" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 720rpx;">
        <view class="hgztitle flex">
          <view class="titname">教育水平</view>
          <view class="iconcss" @tap="educationalLevel = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view :class="item.check ? 'hgxuanzhong' : 'hgxz'" @click="elEclick(item,index)" v-for="(item,index) in eLlist"
          :key="index">
          {{item.name}}
        </view>
      </view>
    </u-popup>
    <!-- 住房状况-->
    <u-popup v-model="housingSituation" mode="bottom" border-radius="30">
      <view class="hgzbox" style="height: 720rpx;">
        <view class="hgztitle flex">
          <view class="titname">工作情况</view>
          <view class="iconcss" @tap="housingSituation = false">
            <u-icon name="close" color="#999999" size="30rpx"></u-icon>
          </view>
        </view>
        <view :class="item.check ? 'hgxuanzhong' : 'hgxz'" @click="housClick(item,index)" v-for="(item,index) in houSlist"
          :key="index">
          {{item.name}}
        </view>
      </view>
    </u-popup>

    <!-- 免责弹窗 -->
    <view class="uni-popup" v-if="showPopup">
      <view class="main">
        <view class="heades">
          用户在线购车服务协议
        </view>
        <view class="neirong">
          重要提示：</br>
          用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议用户在线购车服务协议
        </view>
        <view class="popup-footer">
          <view class="jkhjkh" @tap="agreepopup(0)">确认</view>
        </view>
      </view>
    </view>
    
    <!-- 恭喜,提交成功！ -->
    <view class="uni-popup" v-if="success">
      <view class="main">
        <view class="heades">
          恭喜,提交成功！
        </view>
        <view class="jiangchuli">
          我们将在3个工作日内处理，请耐心等待距离拥有爱车更近了哟~
        </view>
        <view class="popup-footer flex">
          <view class="disagreeBtn" @tap="shenclick(0)">查看申请</view>
          <view class="fanhuishouy" @tap="shenclick(1)">返回首页</view>
        </view>
      </view>
    </view>
  </view>
</template>


<script src="./carPurchaseApplication.js"></script>
<style scoped lang="scss">
  @import './carPurchaseApplication.scss';
</style>
